<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		apiGetUserInfo,
		apiUserUpdate
	} from '../../api/user.js'
	import {
		useUserStore
	} from '@/stores'

	const userStore = useUserStore()
	let response = null
	const person = ref({ // 用于获取数据的姓名和头像
		name: '',
		avatar: ''
	})

	onMounted(async () => { // 组件渲染前，发起获取数据请求，并把数据渲染到组件上
		console.log("111")
		response = await apiGetUserInfo()
		console.log("response", response)
		person.value.name = response.data.name
		person.value.avatar = response.data.avatar
	})
	console.log("222")


	const logout = () => { // 点击“退出登录”按钮后，弹出一个框询问“确定要退出吗”
		console.log("退出登录")
		uni.showModal({
			title: '确定要退出吗',
			content: '',
			showCancel: true,
			cancelText: '取消',
			confirmText: '确定',
			mask: true,
			success: (res) => { // 若点击“确定”，则跳转到登录页面
				if (res.confirm) {
					console.log('用户已确认退出登录');
					uni.redirectTo({
						url: '/pages/login/login'
					})
					userStore.removeToken()
				} else if (res.cancel) { // 若点击“取消”，返回原页面
					// 用户点击了取消按钮，不执行任何操作
					console.log('用户取消了退出登录');
				}
			}
		});
	}

	const toInformation = () => {
		console.log("个人资料")
		uni.redirectTo({
			url: '/pages/information/information'
		})
	}

	const onAvatarChange = async () => {
		console.log("更新前", person.value.avatar)
		console.log(person)
		// console.log("点击头像")
		// let temp = null
		// let tempRes = null
		// 调用拍照/选择图片
		// 选择图片条件编译
		// uni.chooseMedia 仅支持微信小程序端
		uni.chooseMedia({
			// 文件个数
			count: 1,
			// 文件类型
			mediaType: ['image'],
			success: async (res) => {
				// 本地路径
				const {
					tempFilePath
				} = res.tempFiles[0]
				// 上传
				const resp = uploadFile(tempFilePath)
				console.log(resp)
				console.log(person.value.avatar)
				console.log("更新", tempFilePath)
				// tempRes = await apiUserUpdate(person)

			}
		})
		// tempRes = await apiUserUpdate(person)
		// console.log("tempRes",tempRes)
		// person.value.avatar = temp
		// console.log("更新后",person.value.avatar)
	}

	const uploadFile = (file) => {
		uni.uploadFile({
			url: '/applet/common/upload',
			name: 'file',
			filePath: file,
			success: async (res) => {
				if (res.statusCode === 200) {
					console.log(res)
					const avatar = JSON.parse(res.data).data
					console.log("a=", avatar)
					// 个人信息页数据更新
					person.value.avatar = avatar
					// Store头像更新
					userStore.user.avatar = avatar
					uni.request({
						url: '/applet/user/update',
						method: 'PUT',
						data: {
							"avatar": person.value.avatar
						},
						// headers : {
						// 	"token": "eyJhbGciOiJIUzI1NiJ9.eyJ3eFVzZXJJZCI6OSwiZXhwIjoxNzM0NzQ4ODY1fQ.E-Szp1EyYTVWCJvCY_TXb5CukSLTTthrTkXWPcoGZCc"
						// 	},

						success: (res) => {
							console.log('res=', res)
							console.log('真正更新成功后', person.value.avatar)
							console.log(person)
						},
						fail: (err) => {
							console.log(err)
						}
					})
					// await apiUserUpdate(person)
				}
			}
		})
	}
	// const test = async () => {
	// 	console.log(person)
	// 	const pp = await apiGetUserInfo()
	// 	console.log(pp)
	// 	console.log("useStore",userStore.user)
	// }

	const toMyActivies = () => {
		uni.redirectTo({
			url: '/pages/myActivities/myActivities'
		})
	}
</script>

<template>
	<view class="my">
		<image class="img" src="https://registration-system1.oss-cn-guangzhou.aliyuncs.com/07098aba-5641-4d93-aaac-4ec297f4961b.jpg" mode="widthFix"></image>
		<view class="personal">
			<view class="name-profile">
				<image class="head" :src="person.avatar" mode="scaleToFill" @click="onAvatarChange()"></image>
				<view class="info">
					<view class="name">{{ person.name }}</view>
					<!-- <view class="profile">{{'这家伙很懒，什么都没有留下！'}}</view> -->
				</view>
			</view>
			<view class="from">
				<uni-list :border="false">
					<uni-list-item showArrow title="个人资料" @click="toInformation()" link></uni-list-item>
					<uni-list-item showArrow title="我的活动" @click="toMyActivies()" link></uni-list-item>
					<!-- <uni-list-item showArrow title="我的收藏" to="#"></uni-list-item> -->
					<!-- <uni-list-item showArrow title="地址管理" to="#"></uni-list-item> -->
					<uni-list-item title="退出登录" showArrow @click="logout()" link></uni-list-item>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.img {
		width: 100%;
	}

	.personal {
		height: 550rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));
		/* 渐变透明白色背景 */
		margin: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -100rpx;
		position: relative;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
		/* 确保高于其他元素 */

		.name-profile {
			padding: 35rpx;
			display: flex;
			align-items: flex-start;
			position: relative;

			.head {
				margin-top: -10rpx;
				/* 确保头像左边界紧贴容器左边 */
				border-radius: 50%;
				width: 150rpx;
				height: 150rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 50rpx;
			}

			.name {
				font-size: 35rpx;
				// margin-top: -20rpx;
				// margin-bottom: 10rpx;
				color: #1e1e1e;
				
				font-weight:1000;
			}

			.profile {
				margin-top: 30rpx;
				color: #646566;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.from {
			color: #646566;
			margin-top: 80rpx;
			font-size: 40rpx;
		}

	}
</style>